<template>
    <div class="content">
        <component :is="roleSelect" :data=roleId @onRoleSelect="onRoleSelect" />
        <el-table class="mt20" size="small" ref="multipleTableRef" :data="tableData" border v-loading="form.loading" style="width: 100%;height: 300px !important;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column prop="name" label="姓名" show-overflow-tooltip />
            <el-table-column label="选择证书">
                <template #default="scope">
                    <el-select v-model="scope.row.cert_id" placeholder="请选择">
                        <el-option v-for="item in scope.row.certs" :label="item.title" :value="item.id" />
                    </el-select>
                </template>
            </el-table-column>
        </el-table>
        <div class="text-center">
            <el-button size="small" type="primary" :icon="CirclePlus" @click="onInsert">确定</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { CirclePlus } from '@element-plus/icons-vue'
import { ElMessage, TableInstance } from 'element-plus'
import http from '../../../../util/request';
import roleSelect from "@/components/roleSelect.vue";
const indexMethod = (index: number) => {
  return index+= 1
}

const form = ref<any>({search:'',role_id:0,page:0,current:0,total:0,limit:100,loading:false})
interface Role {
    id: number
    name: string
}

interface User {
    id: number
    name: string
    cert_id:number
    roles:Role[]
}
const tableData = ref<User[]>([])
const tableDataSearch = ref<User[]>([])
const multipleSelection = ref<User[]>([])
const multipleTableRef = ref<TableInstance>()

const roleId = ref<number>(0)

const onGetData = () => {
    
    form.value.loading = true
    
    http.post('/user/all',form.value).then((response:any)=>{
        form.value.loading = false
        tableDataSearch.value = response.data.data
        tableData.value = response.data.data
        tableData.value.forEach((e:User) => {
            e.roles.forEach((u:any) => {
                if(u.role_id == roleId.value){
                    setTimeout(() => {
                        multipleTableRef.value!.toggleRowSelection(e,true)
                    },200)
                }
            });
        });
        form.value.total = response.data.total
    })
}

const props = defineProps<{
    data:any
}>()

watch(props,()=>{
    roleId.value = props.data
    onGetData()
},{ immediate: true })

const handleSelectionChange = (val: User[]) => {
    console.log(val)
    multipleSelection.value = val
}

const onInsert = () => {
    if(!multipleSelection.value.length){
        ElMessage.error('请选择人员');
        return
    }
    let userId:number[] = []
    let certId:number[] = []
    multipleSelection.value.forEach((e:User) => {
        userId.push(e.id)
        tableData.value.forEach((eu:any) => {
            if(e.id == eu.id){
                certId.push(eu.cert_id)
            }
        });
    });
    
    let obj:any = {
        role_id:roleId.value,
        user_id:JSON.stringify(userId),
        cert_id:JSON.stringify(certId)
    }
    http.put('/role/bindUser',obj).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);return;
        }
        ElMessage.success(response.data.msg);
        saveBind();
    })
}

const saveBind = () => {
    emit('saveBind')
}

const emit = defineEmits(['saveBind'])

const onRoleSelect = (data:number) => {
    roleId.value = data
    onGetData()
}
</script>

<style scoped>

</style>